<template>
  <div class="inventoryList auditCmpt">
    <!-- 查询表单 -->
    <div class="form-baseinfo">
      <LPSearchBar
        v-model="searchModel"
        :search-data="searchData"
        label-width="100px"
        @handleSearchSubmit="handleSearchSubmit"
        @handleSearchReset="handleSearchReset"
      />
    </div>
    <div class="form-baseinfo">
      <!-- 表格列表 -->
      <div class="btn_area">
        <el-button size="medium" type="primary" @click="syncUserInfo">同步用户信息</el-button>
      </div>
      <LPTablePage
        :show-indexfixed="false"
        index-label="序号"
        :table-data="tableData"
        :table-column="tableColumn"
        :total="total"
        :current-page="currentPage"
        align="center"
        class="table"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      >
        <template slot="departmentName" slot-scope="{ row }">
          <div>{{ row.departmentName }} [{{ row.departmentId }}]</div>
        </template>
        <template slot="handel" slot-scope="{ row }">
          <el-button type="text" @click="updateCustomerCardNo(row)">获取卡号</el-button>
        </template>
      </LPTablePage>
    </div>
    <el-dialog
      class="dialog"
      :visible.sync="syncUserInfoDialog"
      :before-close="syncUserInfoCancle"
      title="同步用户信息"
      width="500px"
    >
      <el-form style="margin-top: 20px">
        <el-form-item class="text" label="开始同步时间">
          <el-date-picker v-model="syncStartTime" class="picker" type="date" placeholder="请选择日期" />
          <!-- <el-input v-model="syncStartTime"></el-input> -->
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="button" size="medium" @click="syncUserInfoCancle">取消</el-button>
        <el-button class="button" type="primary" size="medium" @click="syncUserInfoSave">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getEmployessList, AutoGetUsers, AutoExecUsers, UpdateCustomerCardNo } from '@/api/LaborProtection/employee'
import { parseTime } from '@/utils/lpUtils.js'
import LPTablePage from '@/components/LPTablePage/index.vue'
import LPSearchBar from '@/components/LPSearchBar/index.vue'

export default {
  components: { LPTablePage, LPSearchBar },
  data() {
    return {
      searchModel: {},
      searchData: [
        { label: '', placeholder: '员工姓名', prop: 'RealName' },
        { label: '', placeholder: '员工工号', prop: 'JobNum' },
        { label: '', placeholder: '员工卡号', prop: 'CardNo' },
        { label: '', placeholder: '员工岗位', prop: 'JobName' },
        { label: '', placeholder: '所属部门', prop: 'DepartmentName' }
      ],
      // 列表数据
      tableData: [],
      // 表格字段
      tableColumn: [
        { label: '员工姓名', prop: 'realName' },
        { label: '员工工号', prop: 'jobNum' },
        { label: '员工卡号', prop: 'cardNo' },
        { label: '手机电话', prop: 'mobile' },
        { label: '所属部门', prop: 'departmentName', render: true },
        { label: '员工岗位', prop: 'jobName' },
        { label: '操作', prop: 'handel', render: true }
      ],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      syncUserInfoDialog: false,
      syncStartTime: ''
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    syncUserInfoCancle() {
      this.syncStartTime = ''
      this.syncUserInfoDialog = false
    },
    updateCustomerCardNo(row) {
      const data = {
        user_no: row.jobNum
      }
      UpdateCustomerCardNo(data).then((res) => {
        this.$message.success('获取成功')
        this.getList()
      })
    },
    syncUserInfoSave() {
      if (this.syncStartTime == '' || this.syncStartTime == null) return this.$message.warning('请选择开始同步时间')
      const data = {
        startTime: parseTime(this.syncStartTime, '{y}-{m}-{d}')
      }
      const data1 = {
        isWhile: false
      }
      AutoGetUsers(data)
        .then((res1) => {
          this.$message.success('同步成功')
          this.getList()
          AutoExecUsers(data1)
            .then((res2) => {
              this.$message.success('同步成功')
              this.getList()
            })
            .catch((err) => {
              this.$message.error('同步超时')
            })
        })
        .catch((err) => {
          this.$message.error('同步超时')
        })
    },
    syncUserInfo() {
      this.syncUserInfoDialog = true
    },
    // 查询按钮
    handleSearchSubmit() {
      this.currentPage = 1
      this.getList()
    },
    // 重置按钮
    handleSearchReset() {
      this.handleSearchSubmit()
    },
    // 获取列表
    getList() {
      const params = {
        ...this.searchModel,
        SkipCount: this.currentPage,
        MaxResultCount: this.pageSize
      }
      getEmployessList(params).then((res) => {
        if (!res.error) {
          this.tableData = res.items
          this.total = res.totalCount
        }
      })
    },
    handleSizeChange(v) {
      this.pageSize = v
      this.currentPage = 1
      this.getList()
    },
    handleCurrentChange(v) {
      this.currentPage = v
      this.getList()
    }
  }
}
</script>

<style lang="scss">
.el-form-item__label {
  font-weight: normal;
}

.el-dialog__body {
  padding-top: 0px;
}

.el-divider {
  margin-top: 5px;
}
</style>

<style lang="scss" scoped>
.auditCmpt {
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
  .form-baseinfo:first-child {
    margin: 20px, 0, 20px, -10px;
    border-radius: 3px;
  }
}
.btn_area {
  background-color: #fff;
  padding: 0.2rem;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.inventoryList {
  .form-baseinfo {
    ::v-deep .search-bar input.el-input__inner {
      width: 2rem;
    }
  }

  ::v-deep .table {
    .red {
      color: $high_risk_color;
    }
  }
}
.dialog {
  .button {
    margin: 30px 15px 0 20px;
    width: 100px;
  }
}

.el-form-item.text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: -20px 30px;
}
::v-deep .el-form-item__content {
  width: 100%;
}
.picker {
  width: 100%;
}
</style>
